<script setup lang='ts' name="add-menu">
import { getMenuMgtAss, getMenuMgtSup, menuMgtAdd } from '@fl/api/exploit-setting'
import UpdatedOss from '@fl/components/upLoad-oss.vue'
import { ElDialog, ElForm, ElFormItem } from 'element-plus'
import { ref, toRefs, watch } from 'vue'

const props = withDefaults(defineProps<{
    data?: any
    modelValue: boolean
}>(), {
    data: () => { },
})
const emits = defineEmits(['update:modelValue', 'confirm'])
const { data, modelValue } = toRefs(props)

const appCode = 1003 as const // 前后端默认 1003 pc端

const state = {
    appCode,
    appMenuId: '',
    menuName: '',
    menuPath: '',
    parentId: null,
    sort: 0,
    type: 1, // 1分组 2应用
}

const form = ref<any>({ ...state })
const formRef = ref()
const supGroup = ref<any>([])
const apps = ref<any>([])

const rules = reactive<any>({
    appMenuId: [
        { message: '请选择', required: true, trigger: 'blur' },
    ],
    menuName: [
        { message: '请选择', required: true, trigger: 'change' },
    ],
    menuPath: [
        { message: '请上传', required: true, trigger: 'blur' },
    ],
    parentId: [
        { message: '请选择', required: true, trigger: 'blur' },
    ],
    type: [
        { message: '请选择', required: true, trigger: 'blur' },
    ],
})

function typeChange() {
    form.value.parentId = ''
    // if (val === 1) {
    //     rules.menuName = [
    //         { message: '请选择', required: true, trigger: 'blur' },
    //     ]
    // }
    // else {
    //     rules.hezlx = [
    //         { message: '请选择', required: true, trigger: 'change' },
    //     ]
    // }
}

async function doSave(formEl: any) {
    if (!formEl)
        return
    await formEl.validate((valid, fields) => {
        if (valid) {
            menuMgtAdd({ ...form.value }).then((res: any) => {
                if (res.code === 200) {
                    close(formEl)
                    ElMessage.success('保存成功')
                    emits('confirm')
                }
                else { ElMessage({ message: res.msg, type: 'error' }) }
            }).catch((err) => {
                const message = err?.response?.data?.message || err
                ElMessage({ message, type: 'error' })
            })
        }
        else {
            console.log('error submit!', fields)
        }
    })
}

function close(formEl: any) {
    formEl && formEl.resetFields()
    emits('update:modelValue', false)
}

async function init() {
    // 获取关联应用
    const appData = await getMenuMgtAss({ appCode })
    const target: any = appData?.data || []
    target.forEach((v: any) => {
        v.disabled = v.flag === 1 // 1为分组不可选择 2应用可选中
    })

    apps.value = target

    // 获取上级分组
    const res = await getMenuMgtSup({ appCode })
    supGroup.value = res?.data || []
}

init()

watch(data, (val: any) => {
    console.log('二级企业详情', val)
    if (val.value) {
        form.value = {
            ...val.value,
        }
    }
    else {
        form.value = {
            ...state,
        }
    }
}, {
    deep: true,
})
</script>

<template>
    <ElDialog v-model="modelValue"
              width="600"
              :title="form?.id ? '编辑' : '新增'"
              @close="close"
    >
        <ElForm ref="formRef"
                :model="form"
                label-position="top"
                label-width="auto"
                :rules="rules"
        >
            <ElFormItem label="菜单类型"
                        prop="type"
            >
                <el-radio-group v-model="form.type"
                                @change="typeChange"
                >
                    <el-radio :value="1">
                        分组
                    </el-radio>

                    <el-radio :value="2">
                        应用
                    </el-radio>
                </el-radio-group>
            </ElFormItem>

            <template v-if="form.type === 1">
                <ElFormItem label="分组名称"
                            prop="menuName"
                >
                    <el-input v-model="form.menuName" />
                </ElFormItem>

                <ElFormItem label="上级分组"
                            prop="parentId"
                >
                    <el-select v-model="form.parentId"
                               placeholder="请选择"
                    >
                        <el-option v-for="group in supGroup"
                                   :key="group.id"
                                   :label="group.menuName"
                                   :value="group.id"
                        />
                    </el-select>
                </ElFormItem>
            </template>

            <template v-else>
                <ElFormItem label="关联应用"
                            prop="appMenuId"
                >
                    <el-select v-model="form.appMenuId"
                               placeholder="请选择"
                    >
                        <el-option v-for="app in apps"
                                   :key="app.id"
                                   :label="app.name"
                                   :value="app.id"
                                   :disabled="app.disabled"
                        />
                    </el-select>
                </ElFormItem>

                <ElRow :gutter="10">
                    <ElCol :span="8">
                        <ElFormItem label="显示图标"
                                    prop="menuPath"
                        >
                            <UpdatedOss v-model="form.menuPath" />
                        </ElFormItem>
                    </ElCol>

                    <ElCol :span="16">
                        <ElFormItem label="显示名称"
                                    prop="menuName"
                        >
                            <el-input v-model="form.menuName" />
                        </ElFormItem>

                        <ElFormItem label="上级分组"
                                    prop="parentId"
                        >
                            <el-select v-model="form.parentId"
                                       placeholder="请选择"
                            >
                                <el-option v-for="group in supGroup"
                                           :key="group.id"
                                           :label="group.menuName"
                                           :value="group.id"
                                />
                            </el-select>
                        </ElFormItem>
                    </ElCol>
                </ElRow>
            </template>

            <!-- <ElFormItem label="排序"
                        prop="sort"
            >
                <ElInputNumber v-model="form.sort"
                               :precision="0"
                               :step="1"
                />
            </ElFormItem> -->

            <div style="text-align: center;">
                <ElButton type="primary"
                          @click="doSave(formRef)"
                >
                    确定
                </ElButton>

                <ElButton @click="close(formRef)">
                    取消
                </ElButton>
            </div>
        </ElForm>
    </ElDialog>
</template>

<style lang="less" scoped>
.info-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 50px;
}
</style>
